<template>
	<view class="container">
		<view class="header">
			<view class="type">
				<u-subsection :list="typeList" :current="typeIndex" @change="changeType"></u-subsection>
			</view>
			<view class="date">
				<u-tabs :list="dateList" @click="clickDate" :current="dateIndex"></u-tabs>
			</view>
		</view>
		<view class="content">
			<block v-for="(item, index) in listData" :key="index">
				<block>
					<view class="content_li con_auto">
						<view class="content_li_num" v-if="index == 0">
							<image src="/static/top1.png" style="width: 60rpx; height: 60rpx"></image>
						</view>
						<view class="content_li_num" v-else-if="index == 1">
							<image src="/static/top2.png" style="width: 60rpx; height: 60rpx"></image>
						</view>
						<view class="content_li_num" v-else-if="index == 2">
							<image src="/static/top3.png" style="width: 60rpx; height: 60rpx"></image>
						</view>
						<view class="content_li_num" v-else>{{ index }}</view>
						<view class="content_li_name">{{item.sbssry}}</view>
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [
				{
					name: '金额排名',
					type: 1
				},
				{
					name: '次数排名',
					type: 2
				}
			],
			typeIndex: 0,
			dateList: [
				{
					name: '今日',
					type: 1
				},
				{
					name: '昨日',
					type: 2
				},
				{
					name: '本周',
					type: 3
				},
				{
					name: '本月',
					type: 4
				},
				{
					name: '上月',
					type: 5
				},{
					name: '今年',
					type: 6
				},{
					name: '上年',
					type: 7
				}
			],
			dateIndex: 0
		};
	},
	onLoad() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			let _this = this;
			let type = _this.typeList[_this.typeIndex]['type'];
			let date = _this.dateList[_this.dateIndex]['type'];
			uni.showLoading({
				title:'获取中'
			})
			_this
				.$http('order/getPerformanceInfo', {
					type,
					date
				})
				.then((res) => {
					uni.hideLoading()
					if(res.code){
						_this.listData = res.data
					}
				});
		},
		changeType(index) {
			this.typeIndex = index;
			this.getInfo()
		},
		clickDate(e) {
			this.dateIndex = e.index;
			this.getInfo()
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	background: #fff;
}
.content {
	background: #fff;
	&_li {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 1rpx solid #f4f4f4;
		&_num {
			width: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(51, 51, 51, 0.5);
		}
		&_name {
			margin-left: 24rpx;
		}
	}
}
</style>
